<template>
  <div class="axiom-theme-switch">
    <axiom-button
      text
      :icon="themeIcon"
      @click="toggleTheme"
      class="theme-toggle-btn"
      :title="currentThemeInfo.label"
    />
    
    <!-- 主题选择下拉菜单 -->
    <div v-if="showThemeMenu" class="theme-menu" ref="themeMenuRef">
      <div class="theme-menu-header">
        <axiom-text size="small" weight="medium">选择主题</axiom-text>
      </div>
      <div class="theme-options">
        <div 
          v-for="theme in themes"
          :key="theme.value"
          class="theme-option"
          :class="{ 'active': currentThemeName === theme.value }"
          @click="selectTheme(theme.value)"
        >
          <div class="theme-preview" :class="`theme-preview--${theme.value}`">
            <div class="preview-color primary"></div>
            <div class="preview-color secondary"></div>
            <div class="preview-color accent"></div>
          </div>
          <axiom-text size="small">{{ theme.label }}</axiom-text>
        </div>
      </div>
    </div>
    
    <!-- 遮罩层 -->
    <div 
      v-if="showThemeMenu" 
      class="theme-menu-overlay"
      @click="closeThemeMenu"
    ></div>
  </div>
</template>

<script>
import { useThemeStore } from '../../stores/theme.js'
import AxiomButton from './AxiomButton.vue'
import AxiomText from './AxiomText.vue'

export default {
  name: 'AxiomThemeSwitch',
  // // mixins: [GlobalUtilsMixin], // REMOVE: Incorrect usage
  components: { AxiomButton, AxiomText },
  setup() {
    const themeStore = useThemeStore();
    return { themeStore };
  },
  data() {
    return {
      showThemeMenu: false,
    }
  },
  computed: {
    // 直接从 store 获取 themes 列表
    themes() {
      return this.themeStore.themes;
    },
    // 直接从 store 获取当前主题名称 string
    currentThemeName() {
      return this.themeStore.theme;
    },
    // 根据当前主题名称，从 themes 列表中查找完整的主题对象
    currentThemeInfo() {
      return (
        this.themes.find(
          (t) => t.value === this.currentThemeName
        ) || this.themes[0]
      );
    },
    themeIcon() {
      return this.currentThemeName.includes('dark') || this.currentThemeName.includes('cyber') ? 'Moon' : 'Sun';
    }
  },
  created() {
    // [关键修复] 移除对 mixin 内部方法的调用
    // this.useComponentUtils('CThemeSwitch'); 
  },
  methods: {
    toggleTheme() {
      // [关键修复] 先改变状态，再记录日志
      this.showThemeMenu = !this.showThemeMenu;
      // this.logger.debug('切换主题菜单显示状态', { show: this.showThemeMenu }); // FIXME: Re-enable when logger is globally available
    },
    selectTheme(themeValue) {
      // [关键修复] 先执行主要逻辑，再记录日志
      this.themeStore.setTheme(themeValue);
      this.closeThemeMenu();
      // this.logger.debug('选择主题', { theme: themeValue }); // FIXME: Re-enable when logger is globally available
    },
    closeThemeMenu() {
      this.showThemeMenu = false;
    },
    handleClickOutside(event) {
      if (this.$refs.themeMenuRef && !this.$refs.themeMenuRef.contains(event.target) && !this.$el.contains(event.target)) {
        this.closeThemeMenu();
      }
    },
  },
  mounted() {
    document.addEventListener('click', this.handleClickOutside, true);
  },
  beforeUnmount() {
    document.removeEventListener('click', this.handleClickOutside, true);
  },
}
</script>

<style lang="scss">
@use '../../styles/components/common/axiom-theme-switch';
</style>
